$main-backcolor: rgb(12, 101, 189);
$main-bordercolor: var(--mapBorderColor);//rgb(5, 65, 123);
$device-color: rgb(79, 86, 93);
$line-color:   var(--mapBorderColor);
$flow-backcolor: rgb(218, 218, 218);
$flow-bordercolor: var(--mapBorderColor);//rgb(117, 117, 117);
$flowline-color: var(--mapBorderColor);//rgb(117, 117, 117);
$internal-backcolor: rgb(114,120,125);

.main-device {
    position: absolute;
    text-align: center;
    background-color: $main-backcolor;
    color: white;
    border-style: solid;
    border-color: $main-bordercolor;
}

.node-device {
    position: absolute;
    background-color: $device-color;
    text-align: center;
    padding-top: 17px;
    border-style: solid;
    border-color: $line-color;
    mat-icon {
        color: white;
    }
}

.node-internal {
    position: absolute;
    background-color: $internal-backcolor;
    text-align: center;
    padding-top: 17px;
    border-style: solid;
    border-color: $line-color;
    mat-icon {
        color: white;
    }
}

.node-flow {
    position: absolute;
    background-color: $flow-backcolor;
    text-align: center;
    padding-top: 17px;
    border-style: solid;
    border-color: $flow-bordercolor;
    mat-icon {
        color: black;
    }
}
.main-line {
    position: absolute;
    background-color: $line-color;
}
.main-line-flow {
    position: absolute;
    background-color: $flowline-color;
}

.device-line {
    position: absolute;
    background-color: $line-color;
}
.flow-line {
    position: absolute;
    background-color: $flowline-color;
}
.connection-line {
    position: absolute;
    background-color: $line-color;
}

// .main-device mat-icon {
//     font-size: 0px;
// }
// .main-device:hover mat-icon {
//     font-size: 17px;
// }

.device-header {
    display: block;
    font-size: 17px;
    padding-bottom: 7px;
    padding-top: 0px;
    min-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-pro {
    display: block;
    font-size: 12px;
    padding-top: 0px;
    min-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-pro-line {
    display: inline-block;
    font-size: 12px;
    padding-top: 5px;
}

.device-icon {
    position: absolute;
    cursor:pointer;
}

.device-edit {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 17px;
}

.device-edit-disabled {
    color:rgb(136, 136, 136) !important;
    cursor:default;
}

.device-delete {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 17px;
}

.device-list {
    position: absolute;
    right: 30px;
    font-size: 24px;
    bottom: 0px;
}

.device-status {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 4px;
}

// Table View Mode
.container {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    position: absolute;
    bottom: 0px;
    top: 1px;
    left:0px;
    right:0px;
}

.mat-table {
    overflow: auto;
    /* min-width: 1500px; */
    height: 100%;
}

.mat-row {
    min-height: 40px;
    height: 43px;
}

.mat-cell {
    font-size: 13px;
}

.mat-header-row {
    top: 0;
    position: sticky;
    z-index: 1;
}

.mat-header-cell {
    font-size: 15px;
}

.mat-column-select {
    // overflow: visible;
    flex: 0 0 100px;
}

.mat-column-name {
    flex: 1 1 160px;
}

.mat-column-type {
    flex: 0 0 150px;
}

.mat-column-polling {
    flex: 0 0 100px;
}

.mat-column-address {
    flex: 2 1 300px;
}

.mat-column-status {
    flex: 0 0 120px;
}

.mat-column-enabled {
    flex: 0 0 160px;
}

.mat-column-remove {
    flex: 0 0 60px;
}

.selectWidthClass {
    flex: 0 0 100px;
 }

 .selectHideClass {
    flex: 0 0 10px;
 }

.my-header-filter-input {
    display: block; 
    margin-top: 4px;
    margin-bottom: 6px;
    padding: 3px 1px 3px 2px;
    border-radius: 2px;
}

.showTable {
    display: flex;
}

.hideTable {
    display: none;
}